<template>
  <div class="bigbox">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="用电企业">
              <el-select
                v-model="form.orgNo"
                size="small"
                ref="shou"
                style="width: 100%"
              >
                <el-option
                  class="option"
                  v-for="item in conplae"
                  :key="item.orgNo"
                  :label="item.orgName"
                  :value="item.orgNo"
                  suffix-icon="el-icon-date"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="报警等级">
              <el-button-group>
                <el-button
                  size="small"
                  @click="botton('')"
                  :type="alarmLevel ? '' : 'primary'"
                  >全部{{ dengjiobj.alarmCount }}</el-button
                >
                <el-button
                  size="small"
                  @click="botton(3)"
                  :type="alarmLevel == '3' ? 'danger' : ''"
                  >严重{{ dengjiobj.yzAlarmCount }}</el-button
                >
                <el-button
                  size="small"
                  @click="botton(2)"
                  :type="alarmLevel == '2' ? 'warning' : ''"
                  >普通{{ dengjiobj.ptAlarmCount }}</el-button
                >
                <el-button
                  size="small"
                  @click="botton(1)"
                  :type="alarmLevel == '1' ? 'success' : ''"
                  >轻微{{ dengjiobj.qwAlarmCount }}</el-button
                >
              </el-button-group>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="是否确认">
              <el-switch
                @change="getgaojing()"
                v-model="form.isProcessed"
                active-color="#1890ff"
                inactive-color="#ccc"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="text-align: right">
            <el-form-item label="">
              <el-button @click="chongzhi" size="small">重 置</el-button>
              <el-button @click="chaxun" size="small" type="primary"
                >查 询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 盒子主体 -->
    <div class="bodybox">
      <!-- 表头刷新调整表格 -->
      <div class="titlebox">
        <div style="display: flex">
          <div class="text">实时报警</div>
          <div>
            <button
              class="button"
              :style="{
                'background-color': isactive == '100' ? '#1890ff' : '',
                color: isactive == '100' ? '#fff' : ''
              }"
              @click="submit('100')"
            >
              全部
            </button>
            <button
              class="button"
              :style="{
                'background-color': isactive == item.alarmType ? '#1890ff' : '',
                color: isactive == item.alarmType ? '#fff' : ''
              }"
              @click="submit(item.alarmType)"
              v-for="(item, index) in gaojingtypelist"
              :key="index"
            >
              {{ item.description }}{{ item.alarmCount }}
            </button>
          </div>
        </div>
        <div class="right">
          <div class="texts">注：近30日内报警</div>
          <div>
            <el-tooltip
              class="item"
              effect="dark"
              content="刷新"
              placement="top"
            >
              <span @click="shuaxin"
                ><i class="el-icon-refresh-right" style="cursor: pointer"></i
              ></span>
            </el-tooltip>
            <el-dropdown trigger="click" @command="command">
              <span class="el-dropdown-link">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="密度"
                  placement="top"
                >
                  <span
                    ><i class="el-icon-d-caret" style="cursor: pointer"></i
                  ></span>
                </el-tooltip>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="默认">默认</el-dropdown-item>
                <el-dropdown-item command="中等">中等</el-dropdown-item>
                <el-dropdown-item command="紧凑">紧凑</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="modelbox"></div>
      <!-- table表格区域 -->
      <div style="height: 85%">
        <template>
          <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 100%"
            border
            id="exportTabyong"
            ref="table"
            height="calc(100% - 1px)"
            :size="iissize"
            :header-cell-style="{
              'text-align': 'center',
              background: '#f5f5f5'
            }"
          >
            <template slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </template>
            <el-table-column
              type="index"
              fixed
              align="center"
              label="序号"
              width="50"
            >
            </el-table-column>
            <el-table-column
              fixed
              align="center"
              prop="eventLevelName"
              label="告警等级"
            >
              <template #default="{ row }">
                <span
                  class="gaojingdengji"
                  :class="{
                    yellow: row.eventLevelName == '普通',
                    green: row.eventLevelName == '轻微',
                    red: row.eventLevelName == '严重'
                  }"
                >
                  {{ row.eventLevelName }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="orgName" label="用电企业" width="220">
            </el-table-column>
            <el-table-column prop="switchRoom" label="配电房" width="220">
            </el-table-column>
            <el-table-column prop="devName" label="设备名称" width="220">
            </el-table-column>
            <el-table-column prop="measureName" label="告警信号">
            </el-table-column>
            <el-table-column prop="eventDesc" label="告警描述" width="400">
            </el-table-column>
            <el-table-column
              prop="alarmTime"
              label="告警时间"
              align="center"
              width="200"
            >
            </el-table-column>
            <el-table-column prop="alarmValue" label="告警值" align="right">
            </el-table-column>
            <el-table-column
              prop="isReturn"
              label="复归"
              align="center"
              width="100"
            >
              <template #default="{ row }">
                <span>{{ row.isReturn ? '是' : '否' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="ydl"
              width="150"
              align="center"
              fixed="right"
              label="操作"
            >
              <template #default="{ row }">
                <el-button type="text" size="small" @click="sure(row)"
                  >确认</el-button
                >
                <el-button type="text" size="small" @click="fugui(row)"
                  >复归</el-button
                >
                <el-button type="text" size="small" @click="jiankong(row)"
                  >监控</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div>
          <el-dialog :visible.sync="dialogVisible" width="40%" center>
            <div>
              <div style="font-weight: 600">处理描述</div>
              <div style="margin: 25px 0">
                <el-input type="textarea" :rows="2" v-model="textarea">
                </el-input>
              </div>
              <div>确认时间: {{ timeobj }}</div>
            </div>
            <span slot="footer" class="dialog-footer">
              <button
                class="button chaxun"
                type="primary"
                @click="miaoshu"
                style="cursor: pointer"
              >
                确 定
              </button>
              <button
                class="button"
                @click="dialogVisible = false"
                style="cursor: pointer"
              >
                取 消
              </button>
            </span>
          </el-dialog>
        </div>
      </div>
      <!-- 底部分页 -->
      <div class="fenye">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="pageobj._pageNo"
          @current-change="getgaojing"
          :total="+totalCount"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getgaojinshuliangapi,
  getshishigailistapi,
  getsurebaocunapi,
  getfuguiapi,
  getgaojintypeapi,
  getCallPoliceapi
} from '../../api/realtime'
export default {
  name: 'CallPoliceIndex',

  data() {
    return {
      loading: false,
      alarmLevel: '',
      form: { isProcessed: false },
      isactive: '100',
      iissize: 'medium',
      tableData: [],
      isactives: false,
      conplae: [],
      dengjiobj: {
        alarmCount: '',
        ptAlarmCount: '',
        qwAlarmCount: '',
        yzAlarmCount: ''
      },
      pageobj: {
        _pageNo: 0,
        _pageSize: 10
      },
      dialogVisible: false,
      timeobj: '',
      textarea: '',
      row: {},
      gaojingtypelist: [],
      quanbu: true,
      yanzhong: false,
      qingwei: false,
      putong: false,
      timer: null,
      totalCount: ''
    }
  },

  async mounted() {
    const {
      data: { list }
    } = await getCallPoliceapi()
    this.conplae = list
    this.$set(this.form, 'orgNo', this.conplae[0]?.orgNo)
    this.getgaojing()
  },
  methods: {
    async getgaojing() {
      this.loading = true
      const res = await getgaojinshuliangapi({ ...this.form })
      this.dengjiobj.alarmCount = res.data.entity.alarmCount
      this.dengjiobj.ptAlarmCount = res.data.entity.ptAlarmCount
      this.dengjiobj.qwAlarmCount = res.data.entity.qwAlarmCount
      this.dengjiobj.yzAlarmCount = res.data.entity.yzAlarmCount
      const gaojingtype = await getgaojintypeapi({
        ...this.form,
        alarmLevel: this.alarmLevel
      })
      this.gaojingtypelist = gaojingtype.data.list
      try {
        const ress = await getshishigailistapi({
          _pageNo: this.pageobj._pageNo - 1,
          _pageSize: this.pageobj._pageSize,
          ...this.form,
          alarmLevel: this.alarmLevel
        })
        this.tableData = ress.data.list
        this.totalCount = ress.data.totalCount
      } catch (error) {
        this.tableData = []
      }
      this.loading = false
    },
    async botton(val) {
      this.alarmLevel = val
      if (val == '') {
        this.alarmLevel = val
        this.quanbu = true
        this.yanzhong = false
        this.qingwei = false
        this.putong = false
      } else if (val == 1) {
        this.alarmLevel = val
        this.quanbu = false
        this.yanzhong = false
        this.qingwei = true
        this.putong = false
      } else if (val == 2) {
        this.alarmLevel = val
        this.quanbu = false
        this.yanzhong = false
        this.qingwei = false
        this.putong = true
      } else if (val == 3) {
        this.alarmLevel = val
        this.quanbu = false
        this.yanzhong = true
        this.qingwei = false
        this.putong = false
      }
      const gaojingtype = await getgaojintypeapi({
        orgType: this.form.orgType,
        orgNo: this.form.orgNo,
        alarmLevel: val
      })
      this.gaojingtypelist = gaojingtype.data.list
      const ress = await getshishigailistapi({
        _pageNo: this.pageobj._pageNo - 1,
        _pageSize: this.pageobj._pageSize,
        ...this.form,
        alarmLevel: val
      })
      this.tableData = ress.data.list
      this.totalCount = ress.data.totalCount
    },
    // 重置
    async chongzhi() {
      this.$set(this.form, 'orgNo', this.conplae[0]?.orgNo)
      this.form.isProcessed = false
      this.alarmLevel = ''
      this.quanbu = true
      this.yanzhong = false
      this.qingwei = false
      this.putong = false
      this.getgaojing()
    },
    async submit(val) {
      this.isactive = val
      const ress = await getshishigailistapi({
        _pageNo: this.pageobj._pageNo - 1,
        _pageSize: this.pageobj._pageSize,
        ...this.form,
        alarmLevel: this.alarmLevel,
        alarmType: val == '100' ? '' : val
      })
      this.tableData = ress.data.list
      this.totalCount = ress.data.totalCount
    },
    // 刷新
    shuaxin() {
      this.$message.success('列表刷新成功')
      this.getgaojing()
    },
    // 查询
    chaxun() {
      this.getgaojing()
    },
    async fugui(row) {
      const res = await getfuguiapi({ soeid: row.soeid })
      console.log(res)
      this.$message.success('复归成功')
      this.getgaojing()
    },
    sure(row) {
      this.row = row
      this.dialogVisible = true
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      let d = date.getHours()
      let e = date.getMinutes()
      let f = date.getSeconds()
      this.timeobj =
        year + '-' + month + '-' + day + ' ' + d + ':' + e + ':' + f
      console.log(this.timeobj)
    },
    async miaoshu() {
      const res = await getsurebaocunapi({
        content: this.textarea,
        processTime: this.timeobj,
        soeid: this.row.soeid
      })
      console.log(res)
      this.dialogVisible = false
      this.getgaojing()
      this.$message.success('保存成功')
    },
    command(val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
    setInterva() {
      this.timer = setInterval(async () => {
        await this.getgaojing()
      }, 10000)
    },
    jiankong(val) {
      const routeData = this.$router.resolve({
        path: '/realtimes',
        query: { id: val.devId, name: val.devName }
      })
      window.open(routeData.href, '_blank')
    }
  },
  // 组件销毁，清除定时器
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  display: none;
}
.tablebar {
  line-height: 32px;
  border-right: 1px solid #ccc;
  width: 25%;
  text-align: center;
  cursor: default;
}
.qingwei {
  border-right: none;
  background-color: #2eb8e6;
  color: #fff;
}
.option {
  height: auto;
}
.bigbox {
  height: 100%;
  background-color: #f1f1f1;
  padding: 10px;
  .topbox {
    background-color: #fff;
    padding: 20px;
    height: 80px;
  }
  .bodybox {
    background-color: #fff;
    margin-top: 10px;
    height: calc(100% - 90px);
    padding: 20px;
    .titlebox {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .text {
        font-weight: bold;
        font-size: 18px;
        margin-right: 20px;
      }
      .button {
        width: auto;
        padding: 0 10px;
      }
      .right {
        .texts {
          font-size: 12px;
          color: #ccc;
          margin-right: 50px;
        }
        display: flex;
        i {
          margin-left: 10px;
        }
        .bewdao {
          width: 63px;
          height: 32px;
        }
        .daochu {
          background-color: #1890ff;
          color: #fff;
          border: none;
          border-radius: 3px;
        }
      }
    }
    .fenye {
      margin-top: 15px;
      text-align: right;
    }
    .modelbox {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      .text {
        font-size: 12px;
        color: #ccc;
      }
      .button {
        height: 31px;
        width: auto;
        line-height: 31px;
        padding: 0 10px;
        margin-right: 15px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 3px;
      }
      .device {
        background-color: #1890ff;
        color: #fff;
      }
    }
  }
}
.gaojingdengji {
  width: 48px;
  height: 24px;
  display: inline-block;
  border-radius: 6px;
  color: #fff;
  text-align: center;
}
.yellow {
  background: #e6ae2e;
}
.red {
  background: #e62e2e;
}
.green {
  background: #2eb8e6;
}
.button {
  width: 63px;
  height: 32px;
  margin-right: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.chaxun {
  background-color: #1890ff;
  color: #fff;
}
</style>
